{{#if scope.currentCluster.isReady}}
  {{#banner-message color="bg-warning"}}
    <p>{{t 'banner.istio' dashboardLink=scope.dashboardLink docsBase=scope.docsBase htmlSafe=true}}</p>
  {{/banner-message}}
{{/if}}

<section class="header clearfix">
  <h1 class="pull-left">
    {{t "clusterIstioPage.header"}}
  </h1>
</section>

{{#if canEnable}}
  {{#if (and enabled ready)}}
    {{banner-message
      color="bg-info"
      message=(t "clusterIstioPage.enabled")
    }}
  {{else if enabled}}
    {{banner-message
      color="bg-warning"
      message=(t "clusterIstioPage.notReady")
    }}
  {{else}}
    {{banner-message
      color="bg-info"
      message=(t "clusterIstioPage.disabled")
    }}
  {{/if}}

  {{#if (and enabled ready)}}
    <div class="row">
      {{istio-component-status
        label="clusterIstioPage.links.kiali.label"
        url=kialiUrl
        logo="kiali"
      }}
      {{istio-component-status
        label="clusterIstioPage.links.jaeger.label"
        url=jaegerUrl
        logo="jaeger"
      }}
      {{istio-component-status
        label="clusterIstioPage.links.grafana.label"
        url=grafana.istioUrl
        logo="grafana"
      }}
      {{istio-component-status
        label="clusterIstioPage.links.prometheus.label"
        url=prometheusUrl
        logo="prometheus-icon"
      }}
    </div>
  {{/if}}

  <div class="row mt-10 mb-10">
    <div class="col span-6">
      <label class="acc-label">
        {{t "clusterIstioPage.version"}}
        {{#if (and enabled latestVersion templateVersion (not-eq latestVersion templateVersion))}}
          <span class="bg-warning pt-0 pb-0 pl-5 pr-5">
            {{t "monitoringPage.upgradeAvailable" version=latestVersion}}
          </span>
        {{/if}}
      </label>
      <div>
        {{new-select
          classNames="form-control"
          content=istioVersions
          value=templateVersion
        }}
      </div>
    </div>
  </div>
  <div class="row mt-10 mb-10">
    {{#unless enableClusterMonitoring}}
      <div class="col span-6">
        <label class="acc-label">
          &nbsp;
        </label>
        <div>
          {{input
            type="checkbox"
            checked=enableMonitoring
            id="input-enable-monitoring"
            disabled=true
          }}
          {{t "clusterIstioPage.enableMonitoring.label"}}
          {{#tooltip-element
             type="tooltip-basic"
             model=(t "clusterIstioPage.goToMonitoring" clusterId=cluster.id htmlSafe=true)
             tooltipTemplate="tooltip-static"
             aria-describedby="tooltip-base"
             baseClass="text-left"
          }}
            <span>
              <i class="icon icon-help icon-blue"/>
            </span>
          {{/tooltip-element}}
        </div>
      </div>
    {{/unless}}
    {{#if (and enabled upgradeAvailable)}}
      <div class="col span-6">
        <label>
          {{input
            type="checkbox"
            checked=forceUpgrade
          }}
          {{t "newCatalog.forceUpgrade"}}
        </label>
      </div>
    {{/if}}
  </div>

  {{#accordion-list as | al expandFn |}}
    {{#accordion-list-item
       title=(t "clusterIstioPage.members.title")
       detail=(t "clusterIstioPage.members.detail")
       expandAll=al.expandAll
       expand=(action expandFn)
       expandOnInit=true
    }}
      <div class="radio">
        <label>
          {{radio-button
            selection=allowSystemGroup
            value=true
          }}
          {{t "clusterIstioPage.allowSystemGroup.true" htmlSafe=true}}
        </label>
      </div>
      <div class="radio">
        <label>
          {{radio-button
            selection=allowSystemGroup
            value=false
          }}
          {{t "clusterIstioPage.allowSystemGroup.false" htmlSafe=true}}
        </label>
        {{#unless allowSystemGroup}}
          {{form-members-catalog-access
            readOnly=false
            members=members
            addAuthorizedPrincipal=(action "addAuthorizedPrincipal")
            removeMember=(action "removeMember")
            searchOnlyGroups=true
            includeLocal=false
          }}
        {{/unless}}
      </div>
    {{/accordion-list-item}}
    {{#accordion-list-item
       title=(t "clusterIstioPage.pilot.title")
       detail=(t "clusterIstioPage.pilot.detail")
       expandAll=al.expandAll
       expand=(action expandFn)
       expandOnInit=false
    }}
      {{form-reservation
        component="Pilot"
        requestCpu=config.pilotRequestCpu
        requestMemory=config.pilotRequestMemory
        limitCpu=config.pilotLimitCpu
        limitMemory=config.pilotLimitMemory
      }}

      <div class="row">
        <div class="col span-6">
          <label class="acc-label" for="input-trace-sampling">
            {{t "clusterIstioPage.config.traceSampling.label"}}
            {{field-required}}
          </label>
          <div class="input-group">
            {{input-float
              min="0"
              max="100"
              id="input-trace-sampling"
              value=config.traceSampling
              classNames="form-control"
              placeholder=(t "clusterIstioPage.config.traceSampling.placeholder")
              precision=2
            }}
            <div class="input-group-addon bg-default">
              {{t "units.percent"}}
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col span-12">
          <label class="acc-label">
            {{t "clusterIstioPage.nodeSelector.helpText" component="Pilot"}}
          </label>
          {{form-key-value
            changedArray=(action (mut pilotNodeSelectors))
            initialMap=pilotNodeSelector
            allowEmptyValue=true
            addActionLabel="clusterIstioPage.nodeSelector.addSelectorLabel"
          }}
        </div>
      </div>
      <div class="row">
        <div class="col span-12">
          {{scheduling-toleration
            editing=true
            tolerate=pilotTolerations
            title=(t "formScheduling.toleration.workloadTitle" workload="Pilot")
          }}
        </div>
      </div>
    {{/accordion-list-item}}

    {{#accordion-list-item
       title=(t "clusterIstioPage.mixer.title")
       detail=(t "clusterIstioPage.mixer.detail")
       expandAll=al.expandAll
       expand=(action expandFn)
       expandOnInit=false
    }}
      {{form-reservation
        component="MixerTelemetry"
        requestCpu=config.mixerTelemetryRequestCpu
        requestMemory=config.mixerTelemetryRequestMemory
        limitCpu=config.mixerTelemetryLimitCpu
        limitMemory=config.mixerTelemetryLimitMemory
      }}

      <div class="row">
        <div class="col span-6">
          <label class="acc-label" for="input-mixer-policy-enabled">
            {{t "clusterIstioPage.config.mixerPolicyEnabled.label"}}
          </label>
          {{schema/input-boolean
            id="input-mixer-policy-enabled"
            value=config.mixerPolicyEnabled
            classNames="form-control"
          }}
        </div>
      </div>

      {{#if config.mixerPolicyEnabled}}
        {{form-reservation
          component="MixerPolicy"
          requestCpu=config.mixerPolicyRequestCpu
          requestMemory=config.mixerPolicyRequestMemory
          limitCpu=config.mixerPolicyLimitCpu
          limitMemory=config.mixerPolicyLimitMemory
        }}
      {{/if}}

      <div class="row">
        <div class="col span-12">
          <label class="acc-label">
            {{t "clusterIstioPage.nodeSelector.helpText" component="Mixer"}}
          </label>
          {{form-key-value
            changedArray=(action (mut mixerNodeSelectors))
            initialMap=mixerNodeSelector
            allowEmptyValue=true
            addActionLabel="clusterIstioPage.nodeSelector.addSelectorLabel"
          }}
        </div>
      </div>
      <div class="row">
        <div class="col span-12">
          {{scheduling-toleration
            editing=true
            tolerate=mixerTolerations
            title=(t "formScheduling.toleration.workloadTitle" workload="Mixer")
          }}
        </div>
      </div>
    {{/accordion-list-item}}

    {{#accordion-list-item
       title=(t "clusterIstioPage.tracing.title")
       detail=(t "clusterIstioPage.tracing.detail")
       expandAll=al.expandAll
       expand=(action expandFn)
       expandOnInit=false
    }}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "clusterIstioPage.config.tracingEnabled.label"}}
          </label>
          {{schema/input-boolean
            value=config.tracingEnabled
            classNames="form-control"
          }}
        </div>
      </div>

      {{#if config.tracingEnabled}}
        {{form-reservation
          component="Tracing"
          requestCpu=config.tracingRequestCpu
          requestMemory=config.tracingRequestMemory
          limitCpu=config.tracingLimitCpu
          limitMemory=config.tracingLimitMemory
        }}
        <div class="row">
          <div class="col span-12">
            <label class="acc-label">
              {{t "clusterIstioPage.nodeSelector.helpText" component="Tracing"}}
            </label>
            {{form-key-value
              changedArray=(action (mut tracingNodeSelectors))
              initialMap=tracingNodeSelector
              allowEmptyValue=true
              addActionLabel="clusterIstioPage.nodeSelector.addSelectorLabel"
            }}
          </div>
        </div>
        <div class="row">
          <div class="col span-12">
            {{scheduling-toleration
              editing=true
              tolerate=tracingTolerations
              title=(t "formScheduling.toleration.workloadTitle" workload="Tracing")
            }}
          </div>
        </div>
      {{/if}}
    {{/accordion-list-item}}

    {{#accordion-list-item
       title=(t "clusterIstioPage.ingress.title")
       detail=(t "clusterIstioPage.ingress.detail")
       expandAll=al.expandAll
       expand=(action expandFn)
       expandOnInit=false
    }}
      <div class="row">
        <div class="col span-6">
          <label class="acc-label">
            {{t "clusterIstioPage.config.gatewayEnabled.label"}}
          </label>
          {{schema/input-boolean
            value=config.gatewayEnabled
            classNames="form-control"
          }}
        </div>
        {{#if config.gatewayEnabled}}
          <div class="col span-6">
            <label class="acc-label" for="input-gateway-type-select">
              {{t "clusterIstioPage.config.gatewayType.label"}}
            </label>
            {{new-select
              id="input-gateway-type-select"
              class="form-control"
              content=gatewayTypeContent
              value=config.gatewayType
            }}
          </div>
        {{/if}}
      </div>

      {{#if config.gatewayEnabled}}
        {{#if (eq config.gatewayType "NodePort")}}
          <div class="row">
            <div class="col span-6">
              <label class="acc-label" for="input-http2-port">
                {{t "clusterIstioPage.config.http2Port.label"}}
                {{field-required}}
              </label>
              {{input-integer
                min="30000"
                max="32767"
                step="1"
                id="input-http2-port"
                value=config.http2Port
                classNames="form-control"
              }}
            </div>
            <div class="col span-6">
              <label class="acc-label" for="input-https-port">
                {{t "clusterIstioPage.config.httpsPort.label"}}
                {{field-required}}
              </label>
              {{input-integer
                min="30000"
                max="32767"
                step="1"
                id="input-https-port"
                value=config.httpsPort
                classNames="form-control"
              }}
            </div>
          </div>
        {{else if (eq config.gatewayType "LoadBalancer")}}
          <div class="row">
            <div class="col span-6">
              <label class="acc-label" for="input-load-balancer-ip">
                {{t "clusterIstioPage.config.loadBalancerIP.label"}}
              </label>
              {{schema/input-string
                value=config.loadBalancerIP
                id="input-load-balancer-ip"
                placeholder=(t "clusterIstioPage.config.loadBalancerIP.placeholder")
              }}
            </div>
            <div class="col span-6">
              {{form-value-array
                initialValues=loadBalancerSourceRanges
                addActionLabel="editDns.loadBalancerSourceRanges.addActionLabel"
                valueLabel="editDns.loadBalancerSourceRanges.value"
                valuePlaceholder="editDns.loadBalancerSourceRanges.placeholder"
                changed=(action (mut loadBalancerSourceRanges))
                addButtonClass="btn bg-link icon-btn"
              }}
            </div>
          </div>
        {{/if}}

        {{form-reservation
          component="IngressGateway"
          requestCpu=config.gatewayRequestCpu
          requestMemory=config.gatewayRequestMemory
          limitCpu=config.gatewayLimitCpu
          limitMemory=config.gatewayLimitMemory
        }}

        <div class="row">
          <div class="col span-12">
            <label class="acc-label">
              {{t "clusterIstioPage.nodeSelector.helpText" component="Gateway"}}
            </label>
            {{form-key-value
              changedArray=(action (mut gatewayNodeSelectors))
              initialMap=gatewayNodeSelector
              allowEmptyValue=true
              addActionLabel="clusterIstioPage.nodeSelector.addSelectorLabel"
            }}
          </div>
        </div>
        <div class="row">
          <div class="col span-12">
            {{scheduling-toleration
              editing=true
              tolerate=gatewayTolerations
              title=(t "formScheduling.toleration.workloadTitle" workload=(parse-camelcase "IngressGateway"))
            }}
          </div>
        </div>
      {{/if}}
    {{/accordion-list-item}}

    {{#accordion-list-item
       title=(t "clusterIstioPage.customAnswers.title")
       detail=(t "clusterIstioPage.customAnswers.detail")
       expandAll=al.expandAll
       expand=(action expandFn)
       expandOnInit=false
    }}
      <BannerMessage
        @color="bg-warning"
        @icon="icon-alert"
        @message={{t "clusterIstioPage.customAnswers.warning" appName=settings.appName htmlSafe=true}}
      />
      {{form-key-value
        initialMap=customAnswers
        changed=(action (mut customAnswers))
        allowEmptyValue=true
        addInitialEmptyRow=true
        editing=true
        header=(t "newCatalog.answers.label")
        addActionLabel="newCatalog.answers.addAction"
        keyLabel="newContainer.environment.keyLabel"
        keyPlaceholder="newContainer.environment.keyPlaceholder"
        valueLabel="newContainer.environment.valueLabel"
        valuePlaceholder="newContainer.environment.valuePlaceholder"
      }}
    {{/accordion-list-item}}
  {{/accordion-list}}
  {{#if (or pilotWarning mixerTelemetryWarning tracingWarning gatewayWarning (and mixerPolicyWarning config.mixerPolicyEnabled) mixerWarning istioWarning)}}
    {{#banner-message color="bg-warning"}}
      {{#if istioWarning}}
        <p>{{istioWarning}}</p>
      {{else}}
        <p>{{pilotWarning}}</p>
        <p>{{mixerWarning}}</p>
        <p>{{mixerTelemetryWarning}}</p>
        {{#if config.tracingEnabled}}
          <p>{{tracingWarning}}</p>
        {{/if}}
        {{#if config.gatewayEnabled}}
          <p>{{gatewayWarning}}</p>
        {{/if}}
        {{#if config.mixerPolicyEnabled}}
          <p>{{mixerPolicyWarning}}</p>
        {{/if}}
      {{/if}}
    {{/banner-message}}
  {{/if}}

  {{top-errors errors=errors}}

  {{#if (and (not saveDisabled) (not enabled) enableClusterMonitoring (not scope.currentCluster.isMonitoringReady))}}
    <BannerMessage
      @color="bg-warning"
      @icon="icon-alert"
      @message={{t "clusterIstioPage.monitoringNotDeployed"}}
    />
  {{/if}}

  {{#save-cancel
     saveDisabled=saveDisabled
     editing=enabled
     createLabel="clusterIstioPage.enableActionLabel"
     save=(action "save")
     saved=saved
     cancelDisabled=true
  }}
    {{#if (and enabled canEnable)}}
      <button class="btn bg-error" type="button" {{action "disable"}}>
        {{t "clusterIstioPage.disable"}}
      </button>
    {{/if}}
  {{/save-cancel}}
{{else}}
  {{#if enableClusterMonitoring}}
    {{#unless canReuse}}
      {{banner-message
        color="bg-warning"
        message=(t "clusterIstioPage.upgradeMonitoring" clusterId=cluster.id htmlSafe=true)
      }}
    {{/unless}}
  {{/if}}
  {{#if cluster.isWindows}}
    <BannerMessage
      @color="bg-warning"
      @message={{t "windowsCluster.istio"}}
    />
  {{/if}}
{{/if}}